<template>
    <div class="user-content">
        <el-card class="table" shadow="hover">
            <template #header>
                <div v-if="tablePageConfig.title || tablePageConfig.btnTitle" class="header">
                    <h3 v-if="tablePageConfig.title" class="title">{{ tablePageConfig.title }}</h3>
                    <div class="button">
                        <slot name="button"></slot>
                        <ElButton
                            v-if="tablePageConfig.btnTitle"
                            icon="Plus"
                            style="margin-left: 5px"
                            type="primary"
                            @click="handleAddClick"
                        >
                            {{ tablePageConfig.btnTitle }}
                        </ElButton>
                    </div>
                </div>
            </template>

            <el-table
                id="print"
                ref="tableMain"
                v-loading="loading"
                :border="true"
                :cell-class-name="tablePageConfig.cellClassName"
                :cell-style="tablePageConfig.cellStyle"
                :current-row-key="tablePageConfig.currentRowKey"
                :data="data"
                :default-expand-all="tablePageConfig.defaultExpandAll"
                :default-sort="tablePageConfig.defaultSort"
                :empty-text="tablePageConfig.emptyText"
                :expand-row-keys="tablePageConfig.expandRowKeys"
                :fit="tablePageConfig.fit"
                :header-cell-class-name="tablePageConfig.headerCellClassName"
                :header-cell-style="tablePageConfig.headerCellStyle"
                :header-row-class-name="tablePageConfig.headerRowClassName"
                :header-row-style="tablePageConfig.headerRowStyle"
                :height="tablePageConfig.height"
                :highlight-current-row="tablePageConfig.highlightCurrentRow"
                :indent="tablePageConfig.indent"
                :lazy="tablePageConfig.lazy"
                :load="tablePageConfig.load"
                :max-height="tablePageConfig.maxHeight"
                :row-class-name="tablePageConfig.rowClassName"
                :row-key="tablePageConfig.rowKey"
                :row-style="tablePageConfig.rowStyle"
                :select-on-indeterminate="tablePageConfig.selectOnIndeterminate"
                :show-header="tablePageConfig.showHeader"
                :show-summary="tablePageConfig.showSummary"
                :size="tablePageConfig.size"
                :span-method="tablePageConfig.spanMethod"
                :stripe="tablePageConfig.stripe"
                :sum-text="tablePageConfig.sumText"
                :summary-method="tablePageConfig.summaryMethod"
                :tooltip-effect="tablePageConfig.tooltipEffect"
                :tree-props="tablePageConfig.treeProps"
                @selection-change="handleSelectionChange"
                @current-change="handleCurrentRowChange"
                @row-click="handleRowClick"
            >
                <!--空数据状态的插槽-->
                <template #empty>
                    <el-empty :image-size="60"></el-empty>
                </template>

                <template v-for="(item, index) in tablePageConfig.columns" :key="index">
                    <el-table-column
                        v-if="item.hasOwnProperty('slot')"
                        :key="index"
                        :align="item.align ? item.align : 'center'"
                        :class-name="item.className"
                        :column-key="item.columnKey"
                        :filter-method="item.filterMethod"
                        :filter-multiple="item.filterMultiple"
                        :filter-placement="item.filterPlacement"
                        :filtered-value="item.filteredValue"
                        :filters="item.filters"
                        :fixed="item.fixed"
                        :formatter="item.formatter"
                        :header-align="item.headerAlign"
                        :index="item.index + 1"
                        :label="item.label"
                        :label-class-name="item.labelClassName"
                        :min-width="item.minWidth"
                        :prop="item.slot"
                        :render-header="item.renderHeader"
                        :reserve-selection="item.reserveSelection"
                        :resizable="item.resizable"
                        :selectable="item.selectable"
                        :show-overflow-tooltip="true"
                        :sort-by="item.sortBy"
                        :sort-method="item.sortMethod"
                        :sort-orders="item.sortOrders"
                        :sortable="item.sortable"
                        :type="item.type"
                        :width="item.width"
                    >
                        <template #default="scope">
                            <slot
                                v-if="item.slot === 'action'"
                                :column="scope.column"
                                :currentpage="currentPage"
                                :index="scope.$index"
                                :name="item.slot"
                                :pagesize="pageSize"
                                :row="scope.row"
                            >
                                <slot
                                    :column="scope.column"
                                    :currentpage="currentPage"
                                    :pagesize="pageSize"
                                    :row="scope.row"
                                    name="custombtn"
                                ></slot>
                                <ElButton
                                    v-if="item.btn.includes('详情')"
                                    icon="Document"
                                    size="small"
                                    text
                                    type="primary"
                                    @click="handleDetailBtnClick(scope.row)"
                                >
                                    详情
                                </ElButton>
                                <ElButton
                                    v-if="item.btn.includes('编辑')"
                                    icon="EditPen"
                                    size="small"
                                    text
                                    type="primary"
                                    @click="handleEditBtnClick(scope.row)"
                                >
                                    编辑
                                </ElButton>
                                <ElButton
                                    v-if="item.btn.includes('删除')"
                                    icon="Delete"
                                    size="small"
                                    text
                                    type="danger"
                                    @click="handleDeleteBtnClick(scope.row)"
                                >
                                    删除
                                </ElButton>
                            </slot>
                            <slot
                                v-else
                                :column="scope.column"
                                :currentpage="currentPage"
                                :index="scope.$index"
                                :name="item.slot"
                                :pagesize="pageSize"
                                :row="scope.row"
                            ></slot>
                        </template>
                    </el-table-column>
                    <el-table-column
                        v-else
                        :key="index + 2"
                        :align="item.align ? item.align : 'center'"
                        :class-name="item.className"
                        :column-key="item.columnKey"
                        :filter-method="item.filterMethod"
                        :filter-multiple="item.filterMultiple"
                        :filter-placement="item.filterPlacement"
                        :filtered-value="item.filteredValue"
                        :filters="item.filters"
                        :fixed="item.fixed"
                        :formatter="item.formatter"
                        :header-align="item.headerAlign"
                        :index="item.index"
                        :label="item.label"
                        :label-class-name="item.labelClassName"
                        :min-width="item.minWidth"
                        :prop="item.prop"
                        :render-header="item.renderHeader"
                        :reserve-selection="item.reserveSelection"
                        :resizable="item.resizable"
                        :selectable="item.selectable"
                        :show-overflow-tooltip="true"
                        :sort-by="item.sortBy"
                        :sort-method="item.sortMethod"
                        :sort-orders="item.sortOrders"
                        :sortable="item.sortable"
                        :type="item.type"
                        :width="item.width"
                    />
                </template>
            </el-table>

            <div class="pagination">
                <el-pagination
                    v-if="pageIng"
                    :background="tablePageConfig.background"
                    :current-page="currentPage"
                    :disabled="tablePageConfig.pageDisabled"
                    :hide-on-single-page="tablePageConfig.hideOnSinglePage"
                    :layout="tablePageConfig.layout"
                    :next-text="tablePageConfig.nextText"
                    :page-count="tablePageConfig.pageCount"
                    :page-size="pageSize"
                    :page-sizes="tablePageConfig.pageSizes"
                    :pager-count="tablePageConfig.pagerCount"
                    :popper-class="tablePageConfig.popperClass"
                    :prev-text="tablePageConfig.prevText"
                    :small="tablePageConfig.small"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                >
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script lang="ts" setup>
import { ElLoading, type ElTable } from "element-plus"
import type {
    CellCls,
    CellStyle,
    ColumnCls,
    ColumnStyle,
    Sort,
    SummaryMethod,
    TableColumnCtx,
    TreeNode,
} from "element-plus"
import type { EpPropMergeType } from "element-plus/es/utils"
import type { PropType } from "vue"
import { nextTick, ref } from "vue"
import { deletepageById, postPageListData } from "@/api/common/common"
import { MessageError, MessageSuccess } from "@/utils/message"
import { exportExcleUtils } from "@/utils/exportExcel"
import { mapChildListToChildren } from "@/utils/map-menus"

type size =
    | EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>
    | undefined
type rowClassName = ColumnCls<any> | undefined
type rowStyle = ColumnStyle<any> | undefined
type cellClassName = CellCls<any> | undefined
type cellStyle = CellStyle<any> | undefined
type headerRowClassName = ColumnCls<any> | undefined
type headerRowStyle = ColumnStyle<any> | undefined
type headerCellClassName = CellCls<any> | undefined
type headerCellStyle = CellStyle<any> | undefined
type rowKey = string | ((row: any) => string) | undefined
type defaultSort = Sort | undefined
type pageSizes = number[]
type summaryMethod = SummaryMethod<any> | undefined
type spanMethod =
    | ((data: { row: any; rowIndex: number; column: TableColumnCtx<any>; columnIndex: number }) =>
          | number[]
          | {
                rowspan: number
                colspan: number
            }
          | undefined)
    | undefined
type load = ((row: any, treeNode: TreeNode, resolve: (data: any[]) => void) => void) | undefined
type item = {
    slot: any
    type: any
    index: any
    columnKey: any
    label: any
    prop: any
    width: any
    minWidth: any
    fixed: any
    renderHeader: any
    sortable: any
    sortMethod: any
    sortBy: any
    sortOrders: any
    resizable: any
    formatter: any
    showOverflowTooltip: any
    align: any
    headerAlign: any
    className: any
    labelClassName: any
    selectable: any
    reserveSelection: any
    filters: any
    filterPlacement: any
    filterMultiple: any
    filterMethod: any
    filteredValue: any
}

const props = defineProps({
    tablePageConfig: {
        type: Object,
        default() {
            return {
                /*Header Attributes*/
                mockData: {
                    type: Array as any,
                    default: () => [],
                },
                title: {
                    type: String,
                },
                btnTitle: {
                    type: String,
                },
                /*Table Attributes*/
                pageIngType: {
                    type: Boolean,
                    default: true,
                },
                autoGetData: {
                    // 初始化时 是否自动加载数据
                    type: Boolean,
                    default: true,
                },
                // 查询参数配置
                queryParams: {
                    // 查询参数
                    type: Object,
                    default: () => {},
                },
                checkBox: {
                    // 是否显示checkBox
                    type: Boolean,
                    default: true,
                },
                pageIndex: {
                    // 是否显示分页序号
                    type: Boolean,
                    default: true,
                },
                url: {
                    // url 地址
                    type: String,
                },
                deleteUrl: {
                    type: String,
                },
                height: {
                    // 高度
                    type: [String, Number],
                },
                maxHeight: {
                    // 高度
                    type: [String, Number],
                },
                stripe: {
                    //是否为斑马纹 table
                    type: Boolean,
                    default: true,
                },
                border: {
                    //是否带有纵向边框
                    type: Boolean,
                    default: true,
                },
                size: {
                    //Table 的尺寸
                    type: String as PropType<size>,
                },
                fit: {
                    //列的宽度是否自撑开
                    type: Boolean,
                    default: true,
                },
                showHeader: {
                    //是否显示表头
                    type: Boolean,
                    default: true,
                },
                highlightCurrentRow: {
                    //是否要高亮当前行
                    type: Boolean,
                    default: false,
                },
                currentRowKey: {
                    //当前行的 key，只写属性
                    type: [String, Number],
                },
                rowClassName: {
                    //行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。
                    type: [String, Function] as PropType<rowClassName>,
                },
                rowStyle: {
                    //行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。
                    type: [Object, Function] as PropType<rowStyle>,
                },
                cellClassName: {
                    //单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。
                    type: [String, Function] as PropType<cellClassName>,
                },
                cellStyle: {
                    //单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。
                    type: [Object, Function] as PropType<cellStyle>,
                },
                headerRowClassName: {
                    //表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。
                    type: [String, Function] as PropType<headerRowClassName>,
                },
                headerRowStyle: {
                    //表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。
                    type: [Object, Function] as PropType<headerRowStyle>,
                },
                headerCellClassName: {
                    //表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。
                    type: [String, Function] as PropType<headerCellClassName>,
                },
                headerCellStyle: {
                    //表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。
                    type: [Object, Function] as PropType<headerCellStyle>,
                },
                rowKey: {
                    //	行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。
                    type: [String, Function] as PropType<rowKey>,
                },
                emptyText: {
                    //空数据时显示的文本内容，也可以通过 slot="empty" 设置
                    type: String,
                    default: "暂无数据",
                },
                defaultExpandAll: {
                    //是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效
                    type: Boolean,
                    default: false,
                },
                expandRowKeys: {
                    //可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。
                    type: Array,
                },
                defaultSort: {
                    //默认的排序列的 prop 和顺序。它的prop属性指定默认的排序的列，order指定默认排序的顺序
                    type: Object as PropType<defaultSort>,
                    default() {
                        return { prop: null, order: null }
                    },
                },
                tooltipEffect: {
                    //tooltip effect 属性
                    type: String,
                },
                showSummary: {
                    //是否在表尾显示合计行
                    type: Boolean,
                    default: false,
                },
                sumText: {
                    //合计行第一列的文本
                    type: String,
                },
                summaryMethod: {
                    //自定义的合计计算方法
                    type: Function as PropType<summaryMethod>,
                },
                spanMethod: {
                    //合并行或列的计算方法
                    type: Function as PropType<spanMethod>,
                },
                selectOnIndeterminate: {
                    //在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为 true，则选中所有行；若为 false，则取消选择所有行
                    type: Boolean,
                    default: true,
                },
                indent: {
                    //	展示树形数据时，树节点的缩进
                    type: Number,
                    default: 16,
                },
                lazy: {
                    //是否懒加载子节点数据
                    type: Boolean,
                    default: false,
                },
                load: {
                    //加载子节点数据的函数，lazy 为 true 时生效，函数第二个参数包含了节点的层级信息
                    type: Function as PropType<load>,
                },
                treeProps: {
                    //渲染嵌套数据的配置选项
                    type: Object,
                    default() {
                        return {
                            hasChildren: "hasChildren",
                            children: "children",
                        }
                    },
                },

                /*Table-column Attributes*/
                columns: {
                    type: Array as unknown as PropType<item>,
                    require: true,
                    default: () => [],
                },

                /*Pagination Attributes*/
                small: {
                    //是否使用小型分页样式
                    type: Boolean,
                    default: false,
                },
                background: {
                    //是否为分页按钮添加背景色
                    type: Boolean,
                    default: false,
                },
                pageCount: {
                    //总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性
                    type: Number,
                },
                pagerCount: {
                    //页码按钮的数量，当总页数超过该值时会折叠
                    type: Number,
                    default: 7,
                },
                layout: {
                    //组件布局，子组件名用逗号分隔
                    type: String,
                    default() {
                        return "total, sizes, prev, pager, next, jumper"
                    },
                },
                pageSizes: {
                    //每页显示个数选择器的选项设置
                    type: Array as PropType<pageSizes>,
                    default() {
                        return [10, 20, 30, 40, 50, 100]
                    },
                },
                popperClass: {
                    //每页显示个数选择器的下拉框类名
                    type: String,
                },
                prevText: {
                    //替代图标显示的上一页文字
                    type: String,
                },
                nextText: {
                    //替代图标显示的下一页文字
                    type: String,
                },
                pageDisabled: {
                    //是否禁用
                    type: Boolean,
                    default: false,
                },
                hideOnSinglePage: {
                    //只有一页时是否隐藏
                    type: Boolean,
                    default: false,
                },
            }
        },
    },
})

const emit = defineEmits([
    "table-select-val",
    "table-select-row",
    "rowClick",
    "addClick",
    "editClick",
    "detailClick",
    "deleteClick",
])

// 表格配置相关
const loading = ref(false) // 表格是否加载中
// 分页相关
// const sortTable = ref(props.tableConfig.defaultSort.prop) // 排序字段
// const orderTable = ref(props.tableConfig.defaultSort.order) // 排序类型
// checkBox:true,// 是否显示checkBox
const currentPage = ref(1) // 当前页面
const offset = ref(0)
const pageSize = ref(10) // 每页显示多少条
const total = ref(0) // 一共多少页
const initPage = ref(1) // 初始页面
const autoGetData = ref<boolean>(props.tablePageConfig?.autoGetData !== false)
// 分页相关
const pageIng = ref<boolean>(true)
if (props.tablePageConfig?.pageIngType === false || props.tablePageConfig?.pageIngType === null) {
    pageIng.value = false
}
// showTotal: true,
// showSizer: true,
// showElevator: true,
// 数据相关
const data = ref<any>([]) // 返回数据
const queryParams = ref<any>({})

const tableMain = ref<InstanceType<typeof ElTable>>()

const exportData = ref<any>({})

/**
 * 处理导出点击事件
 *
 * @param name 导出的文件名
 */
function handleExportClick(name: string) {
    let loading = ElLoading.service({ text: "正在导出，请稍候..." })
    if (data.value && data.value.length > 0) {
        const table = data.value.map((item: any) => item)
        const tHeader = props.tablePageConfig.columns.map((item: any) => item.label)
        const filterVal = props.tablePageConfig.columns.map((item: any) => item.prop)
        loading.close()
        exportExcleUtils(tHeader, filterVal, table, name)
        MessageSuccess("数据导出中...")
    } else {
        MessageError("没有可以导出的数据！")
    }
}

/**
 * 触发 'addClick' 事件
 *
 * @returns 无返回值
 */
function handleAddClick() {
    /**
     * 触发 'addClick' 事件
     */
    emit("addClick")
}

/**
 * 处理删除按钮点击事件
 *
 * @param item 被删除的元素对象
 * @emits deleteClick 触发 deleteClick 事件，并将被删除的元素对象作为参数传递
 */
function handleDeleteBtnClick(item: any) {
    emit("deleteClick", item)
}

/**
 * 根据id删除页面
 *
 * @param id 页面id
 * @param data 可选参数，用于传递其他数据
 * @returns 无返回值
 */
function deletepageByIdAction(id: any, data?: any) {
    deletepageById(props.tablePageConfig.deleteUrl, id).then((res: any) => {
        if (res.code == 0) {
            MessageSuccess("del")
            nextTick(() => {
                refresh()
            })
        } else {
            MessageError("del")
        }
    })
}

/**
 * 处理编辑按钮点击事件
 *
 * @param itemData 当前项数据
 * @emits editClick 触发编辑点击事件，并传递当前项数据
 */
function handleEditBtnClick(itemData: any) {
    emit("editClick", itemData)
}

/**
 * 处理详情按钮点击事件
 *
 * @param itemData 详情数据
 */
function handleDetailBtnClick(itemData: any) {
    /**
     * 触发 detailClick 事件，并传递 itemData 作为参数
     *
     * @param itemData 要传递的参数
     */
    emit("detailClick", itemData)
}

/**
 * 处理表格每页显示条数变化事件
 *
 * @param val 新的每页显示条数
 */
function handleSizeChange(val: any) {
    pageSize.value = val
    fetchPageListData(queryParams.value)
}

/**
 * 处理当前页码变化事件
 *
 * @param val 新的页码值
 */
function handleCurrentChange(val: any) {
    currentPage.value = val
    fetchPageListData(queryParams.value)
}

/**
 * 获取数据
 * @param pageNum
 */

if (props.tablePageConfig.mockData && props.tablePageConfig.mockData.length > 0) {
    // eslint-disable-next-line vue/no-setup-props-destructure
    data.value = props.tablePageConfig.mockData
    // eslint-disable-next-line vue/no-setup-props-destructure
    total.value = props.tablePageConfig.mockData.length
}

/**
 * 获取分页列表数据
 *
 * @param searchData 搜索参数，可选
 * @returns 无返回值
 */
function fetchPageListData(searchData: any = {}) {
    queryParams.value = searchData
    let searchinfo: any = {}
    if (props.tablePageConfig.queryParams != null) {
        searchinfo = { ...props.tablePageConfig.queryParams, ...searchData }
    } else {
        searchinfo = searchData
    }
    const page = currentPage.value
    const limit = pageSize.value
    const pageInfo = { page, limit }
    const queryInfo = { ...pageInfo, ...searchinfo }
    postPageListData(props.tablePageConfig.url, queryInfo).then((res: any) => {
        if (props.tablePageConfig.url === "sysMenuNew/queryMenuListAll") {
            data.value = mapChildListToChildren(res.data)
        }
        data.value = res.data
        total.value = res.count
    })
}

// 发起action，请求userslist的数据
if (autoGetData.value) {
    fetchPageListData()
}

/**
 * refresh 函数用于刷新表格数据
 *
 * @returns 无返回值
 */
function refresh() {
    if (props.tablePageConfig.mockData && props.tablePageConfig.mockData.length > 0) {
        data.value = props.tablePageConfig.mockData
        total.value = props.tablePageConfig.mockData.length
    } else {
        currentPage.value = 1
        pageSize.value = 10
        fetchPageListData()
    }
}

//-----------------用于多选------------------
/**
 *用于多选表格，清空用户的选择
 */
function clearSelection() {
    tableMain.value?.clearSelection()
}

/**
 * 处理选中项变化
 *
 * @param selection 选中项
 * @returns 无返回值
 */
function handleSelectionChange(selection: any) {
    emit("table-select-val", selection)
}

//-----------------用于单选------------------
/**
 * 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性
 * @param currentRow
 * @param oldCurrentRow
 */
function handleCurrentRowChange(currentRow: any, oldCurrentRow: any) {
    emit("table-select-row", currentRow, oldCurrentRow)
}

//-----------------用于行点击------------------
/**
 * 处理行点击事件
 *
 * @param row 行数据
 * @param column 列数据
 * @param event 事件对象
 * @returns 无返回值
 */
function handleRowClick(row: any, column: any, event: any) {
    emit("rowClick", row, column, event)
}

/**
 * 用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。
 * @param row
 */
function setCurrentRow(row: any) {
    tableMain.value?.setCurrentRow(row)
}

/**
 *    当表格的排序条件发生变化的时候会触发该事件
 * @param sortData
 */
// function handleSortChange(sortData: any) {
//   sortTable.value = sortData.prop // 排序字段
//   orderTable.value = sortData.order === "ascending" ? "asc" : "desc" // 排序类型
//   getData(current.value)
// }

/**
 * 切换行展开状态
 *
 * @remarks
 * 遍历数据中的每一行，调用表格组件的 toggleRowExpansion 方法来切换每一行的展开状态
 */
function toggleRowExpansion() {
    data.value.forEach((row: any) => {
        tableMain.value?.toggleRowExpansion(row)
    })
}

defineExpose({
    refresh,
    fetchPageListData,
    deletepageByIdAction,
    handleExportClick,
    toggleRowExpansion,
})
</script>

<style lang="scss" scoped>
.empty {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 200px;

    .empty-text {
        margin-top: -10px;
    }
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    // margin-bottom: 20px;

    .title {
        font-size: 20px;
    }

    .button {
        display: flex;
    }
}

:deep(.el-card__body) {
    padding: 10px;
}

.table {
    :deep(.el-table__cell) {
        padding: 12px 0;
    }

    .el-button {
        margin-left: 0;
        padding: 5px 8px;
    }
}

.pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.header > h3:first-child {
    font-size: 22px;
    border-left: 5px solid #1e9fff;
    padding-left: 5px;
}

:deep(.el-card__header) {
    padding: 10px 5px;
}
</style>
@/api/common/common
